<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Portfolio Details - Visible Bootstrap Template</title>
  <meta name="description" content="">
  <meta name="keywords" content="">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Mukta:wght@200;300;400;500;600;700;800&family=Abel:wght@400&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="assets/css/main.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Visible
  * Template URL: https://bootstrapmade.com/visible-bootstrap-agency-template/
  * Updated: May 22 2025 with Bootstrap v5.3.6
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body class="portfolio-details-page">

  <header id="header" class="header d-flex align-items-center position-relative">
    <div class="container-fluid position-relative d-flex align-items-center justify-content-between">

      <a href="index.html" class="logo d-flex align-items-center">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <!-- <img src="assets/img/logo.webp" alt=""> -->
        <h1 class="sitename">Visible</h1>
      </a>

      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="#hero">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#team">Team</a></li>
          <li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
              <li><a href="#">Dropdown 1</a></li>
              <li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                <ul>
                  <li><a href="#">Deep Dropdown 1</a></li>
                  <li><a href="#">Deep Dropdown 2</a></li>
                  <li><a href="#">Deep Dropdown 3</a></li>
                  <li><a href="#">Deep Dropdown 4</a></li>
                  <li><a href="#">Deep Dropdown 5</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown 2</a></li>
              <li><a href="#">Dropdown 3</a></li>
              <li><a href="#">Dropdown 4</a></li>
            </ul>
          </li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
      </nav>

    </div>
  </header>

  <main class="main">

    <!-- Page Title -->
    <div class="page-title" data-aos="fade">
      <div class="heading">
        <div class="container">
          <div class="row d-flex justify-content-center text-center">
            <div class="col-lg-8">
              <h1>Portfolio Details</h1>
              <p class="mb-0">Odio et unde deleniti. Deserunt numquam exercitationem. Officiis quo odio sint voluptas consequatur ut a odio voluptatem. Sit dolorum debitis veritatis natus dolores. Quasi ratione sint. Sit quaerat ipsum dolorem.</p>
            </div>
          </div>
        </div>
      </div>
      <nav class="breadcrumbs">
        <div class="container">
          <ol>
            <li><a href="index.html">Home</a></li>
            <li class="current">Portfolio Details</li>
          </ol>
        </div>
      </nav>
    </div><!-- End Page Title -->

    <!-- Portfolio Details Section -->
    <section id="portfolio-details" class="portfolio-details section">

      <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="project-header">
          <div class="row">
            <div class="col-lg-7" data-aos="fade-up">
              <h1 class="project-title">Interactive Mobile Banking Platform</h1>
              <div class="project-meta">
                <div class="meta-item">
                  <i class="bi bi-calendar3"></i>
                  <span>June 2024</span>
                </div>
                <div class="meta-item">
                  <i class="bi bi-building"></i>
                  <span>FinTech Innovations Inc.</span>
                </div>
                <div class="meta-item">
                  <i class="bi bi-link-45deg"></i>
                  <a href="#" target="_blank">bankingapp.example.com</a>
                </div>
              </div>
              <div class="project-tags" data-aos="fade-up" data-aos-delay="100">
                <span class="tag">Mobile App</span>
                <span class="tag">UX Design</span>
                <span class="tag">FinTech</span>
              </div>
            </div>
            <div class="col-lg-5 d-flex align-items-center justify-content-end" data-aos="fade-up" data-aos-delay="200">
              <div class="technologies">
                <div class="tech-title">Technologies Used:</div>
                <div class="tech-badges">
                  <span>React Native</span>
                  <span>Node.js</span>
                  <span>MongoDB</span>
                  <span>AWS</span>
                  <span>Redux</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="media-showcase" data-aos="zoom-in" data-aos-delay="100">
          <div class="portfolio-details-slider swiper init-swiper">
            <script type="application/json" class="swiper-config">
              {
                "loop": true,
                "speed": 800,
                "autoplay": {
                  "delay": 5000
                },
                "effect": "fade",
                "fadeEffect": {
                  "crossFade": true
                },
                "slidesPerView": 1,
                "pagination": {
                  "el": ".swiper-pagination",
                  "clickable": true,
                  "dynamicBullets": true
                }
              }
            </script>
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="assets/img/portfolio/portfolio-1.webp" alt="Portfolio Image" class="img-fluid">
              </div>
              <div class="swiper-slide">
                <img src="assets/img/portfolio/portfolio-2.webp" alt="Portfolio Image" class="img-fluid">
              </div>
              <div class="swiper-slide">
                <img src="assets/img/portfolio/portfolio-3.webp" alt="Portfolio Image" class="img-fluid">
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>

        <div class="project-content">
          <div class="row gy-4">
            <div class="col-lg-7" data-aos="fade-up">
              <div class="description-box">
                <h3>Project Overview</h3>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, justo non commodo pellentesque, eros massa convallis ipsum, vel ultrices mauris arcu nec magna. Vestibulum ante ipsum primis in faucibus orci luctus et.</p>
                <p>Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur aliquet quam id dui posuere blandit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a nulla porttitor accumsan.</p>
              </div>
            </div>

            <div class="col-lg-5" data-aos="fade-up" data-aos-delay="100">
              <div class="project-stats">
                <div class="stat-item">
                  <div class="stat-number">14k+</div>
                  <div class="stat-label">Active Users</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">98%</div>
                  <div class="stat-label">Client Satisfaction</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">6</div>
                  <div class="stat-label">Months Development</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">4.8</div>
                  <div class="stat-label">App Store Rating</div>
                </div>
              </div>
            </div>
          </div>

          <div class="row gy-4">
            <div class="col-md-6" data-aos="fade-up" data-aos-delay="200">
              <div class="info-card">
                <div class="card-icon">
                  <i class="bi bi-lightbulb"></i>
                </div>
                <h4>The Challenge</h4>
                <p>Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
              </div>
            </div>

            <div class="col-md-6" data-aos="fade-up" data-aos-delay="300">
              <div class="info-card">
                <div class="card-icon">
                  <i class="bi bi-trophy"></i>
                </div>
                <h4>The Solution</h4>
                <p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada. Praesent sapien massa.</p>
              </div>
            </div>
          </div>

          <div class="project-gallery" data-aos="fade-up" data-aos-delay="200">
            <h3>Project Gallery</h3>
            <div class="row g-3">
              <div class="col-6 col-md-3">
                <div class="gallery-item">
                  <img src="assets/img/portfolio/portfolio-9.webp" alt="Project Image" class="img-fluid glightbox">
                </div>
              </div>
              <div class="col-6 col-md-3">
                <div class="gallery-item">
                  <img src="assets/img/portfolio/portfolio-10.webp" alt="Project Image" class="img-fluid glightbox">
                </div>
              </div>
              <div class="col-6 col-md-3">
                <div class="gallery-item">
                  <img src="assets/img/portfolio/portfolio-4.webp" alt="Project Image" class="img-fluid glightbox">
                </div>
              </div>
              <div class="col-6 col-md-3">
                <div class="gallery-item">
                  <img src="assets/img/portfolio/portfolio-6.webp" alt="Project Image" class="img-fluid glightbox">
                </div>
              </div>
            </div>
          </div>

          <div class="key-features" data-aos="fade-up" data-aos-delay="200">
            <h3>Key Features</h3>
            <div class="row g-4">
              <div class="col-md-4">
                <div class="feature-item">
                  <i class="bi bi-shield-check"></i>
                  <h5>Secure Authentication</h5>
                  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
                </div>
              </div>
              <div class="col-md-4">
                <div class="feature-item">
                  <i class="bi bi-graph-up-arrow"></i>
                  <h5>Real-time Analytics</h5>
                  <p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p>
                </div>
              </div>
              <div class="col-md-4">
                <div class="feature-item">
                  <i class="bi bi-gear-wide-connected"></i>
                  <h5>API Integration</h5>
                  <p>Donec sollicitudin molestie malesuada et, porttitor at sem augue.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="project-navigation" data-aos="fade-up" data-aos-delay="300">
            <a href="#" class="prev-project">
              <i class="bi bi-arrow-left"></i>
              <span>Previous Project</span>
            </a>
            <a href="#" class="all-projects">
              <i class="bi bi-grid"></i>
              <span>All Projects</span>
            </a>
            <a href="#" class="next-project">
              <span>Next Project</span>
              <i class="bi bi-arrow-right"></i>
            </a>
          </div>
        </div>

      </div>

    </section><!-- /Portfolio Details Section -->

  </main>

  <footer id="footer" class="footer">

    <div class="container footer-top">
      <div class="row gy-4">
        <div class="col-lg-5 col-md-12 footer-about">
          <a href="index.html" class="logo d-flex align-items-center">
            <span class="sitename">Visible</span>
          </a>
          <p>Cras fermentum odio eu feugiat lide par naso tierra. Justo eget nada terra videa magna derita valies darta donna mare fermentum iaculis eu non diam phasellus.</p>
          <div class="social-links d-flex mt-4">
            <a href=""><i class="bi bi-twitter-x"></i></a>
            <a href=""><i class="bi bi-facebook"></i></a>
            <a href=""><i class="bi bi-instagram"></i></a>
            <a href=""><i class="bi bi-linkedin"></i></a>
          </div>
        </div>

        <div class="col-lg-2 col-6 footer-links">
          <h4>Useful Links</h4>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Terms of service</a></li>
            <li><a href="#">Privacy policy</a></li>
          </ul>
        </div>

        <div class="col-lg-2 col-6 footer-links">
          <h4>Our Services</h4>
          <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Product Management</a></li>
            <li><a href="#">Marketing</a></li>
            <li><a href="#">Graphic Design</a></li>
          </ul>
        </div>

        <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
          <h4>Contact Us</h4>
          <p>A108 Adam Street</p>
          <p>New York, NY 535022</p>
          <p>United States</p>
          <p class="mt-4"><strong>Phone:</strong> <span>+1 5589 55488 55</span></p>
          <p><strong>Email:</strong> <span>info@example.com</span></p>
        </div>

      </div>
    </div>

    <div class="container copyright text-center mt-4">
      <p>© <span>Copyright</span> <strong class="px-1 sitename">Visible</strong> <span>All Rights Reserved</span></p>
      <div class="credits">
        <!-- All the links in the footer should remain intact. -->
        <!-- You can delete the links only if you've purchased the pro version. -->
        <!-- Licensing information: https://bootstrapmade.com/license/ -->
        <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </div>

  </footer>

  <!-- Scroll Top -->
  <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Preloader -->
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>

  <!-- Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>